<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-700">
    <div class="w-full max-w-md p-8 bg-white rounded-2xl shadow-2xl">
      <div class="text-center mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-2">实验设备管理系统</h2>
        <p class="text-sm text-gray-600">Laboratory Management System</p>
      </div>
      
      <form @submit.prevent="handleLogin" class="space-y-6">
        <div>
          <label class="form-label">用户名</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <UserIcon class="h-5 w-5 text-gray-400" />
            </div>
            <input
              v-model="loginForm.username"
              type="text"
              class="form-input pl-10"
              placeholder="请输入用户名"
              required
            />
          </div>
          <p v-if="errors.username" class="mt-1 text-sm text-red-600">{{ errors.username }}</p>
        </div>
        
        <div>
          <label class="form-label">密码</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <LockClosedIcon class="h-5 w-5 text-gray-400" />
            </div>
            <input
              v-model="loginForm.password"
              :type="showPassword ? 'text' : 'password'"
              class="form-input pl-10 pr-10"
              placeholder="请输入密码"
              required
              @keyup.enter="handleLogin"
            />
            <button
              type="button"
              class="absolute inset-y-0 right-0 pr-3 flex items-center"
              @click="showPassword = !showPassword"
            >
              <EyeIcon v-if="!showPassword" class="h-5 w-5 text-gray-400 hover:text-gray-600" />
              <EyeSlashIcon v-else class="h-5 w-5 text-gray-400 hover:text-gray-600" />
            </button>
          </div>
          <p v-if="errors.password" class="mt-1 text-sm text-red-600">{{ errors.password }}</p>
        </div>
        
        <button
          type="submit"
          :disabled="loading"
          class="w-full btn btn-primary py-3 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <span v-if="loading" class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            登录中...
          </span>
          <span v-else>登录</span>
        </button>
      </form>
      
      <div class="mt-8 text-center text-sm text-gray-600">
        <p class="font-medium text-gray-800 mb-2">测试账号：</p>
        <p>管理员：admin / 123456</p>
        <p>领导：leader1 / 123456</p>
        <p>实验室管理员：lab_manager1 / 123456</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { 
  UserIcon, 
  LockClosedIcon, 
  EyeIcon, 
  EyeSlashIcon 
} from '@heroicons/vue/24/outline'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const showPassword = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const errors = reactive({
  username: '',
  password: ''
})

const validateForm = () => {
  errors.username = ''
  errors.password = ''
  
  if (!loginForm.username) {
    errors.username = '请输入用户名'
    return false
  }
  
  if (!loginForm.password) {
    errors.password = '请输入密码'
    return false
  }
  
  if (loginForm.password.length < 6) {
    errors.password = '密码长度不能少于6位'
    return false
  }
  
  return true
}

const showMessage = (message, type = 'success') => {
  // 简单的消息提示实现
  const messageEl = document.createElement('div')
  messageEl.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 ${
    type === 'success' ? 'bg-green-500' : 'bg-red-500'
  }`
  messageEl.textContent = message
  document.body.appendChild(messageEl)
  
  setTimeout(() => {
    document.body.removeChild(messageEl)
  }, 3000)
}

const handleLogin = async () => {
  if (!validateForm()) return
  
  try {
    loading.value = true
    
    // 尝试真实登录
    await userStore.login(loginForm)
    showMessage('登录成功')
    router.push('/')
  } catch (error) {
    console.error('登录失败:', error)
    showMessage('登录失败，请检查用户名和密码', 'error')
  } finally {
    loading.value = false
  }
}
</script>